/**
* 贺向阳 订单促销
*/

    <template>
      <!--贺向阳 订单促销-->
      <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item  :to="{ path: '/' }" >首页</el-breadcrumb-item>
          <el-breadcrumb-item style="font-size: 20px" >订单促销</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row style="position: relative;top: 20px;left: 120px">
          <el-col :span="2">

            <el-dropdown trigger="click" style="position: relative;top: 8px" @command="AuditMethod">

              <span class="el-dropdown-link">
                审核状态<i class="el-icon-arrow-down el-icon--right"></i>
              </span>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="待审核">待审核</el-dropdown-item>
                <el-dropdown-item command="审核失败">审核失败</el-dropdown-item>
                <el-dropdown-item command="审核成功">审核成功</el-dropdown-item>
              </el-dropdown-menu>

            </el-dropdown>


          </el-col>
          <el-col :span="2">

              <el-dropdown trigger="click" style="position: relative;top: 8px;left: 5px" @command="PromotionMethod">

              <span class="el-dropdown-link">
                促销状态<i class="el-icon-arrow-down el-icon--right"  style="position: relative;left: 10px"></i>
              </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="待促销">待促销</el-dropdown-item>
              <el-dropdown-item command="促销中">促销中</el-dropdown-item>
              <el-dropdown-item command="已结束">已结束</el-dropdown-item>
            </el-dropdown-menu>

            </el-dropdown>

          </el-col>

          <el-col :span="4">
            <el-input  placeholder="请输入促销编码" v-model="input" clearable style="width: 200px ;position: relative;left: 10px"></el-input>
          </el-col>

          <el-col :span="2">
            <el-button icon="el-icon-search" circle @click="searchMethod" style="position: relative;left: 10px"></el-button>
          </el-col>

          <el-col :span="2" :offset="6">
            <el-button  @click="OutMethod">导出</el-button>
          </el-col>

          <el-col :span="2">

            <router-link :to="{name:'增加订单促销', params: {order:'新增'}}"><el-button type="primary">新增</el-button></router-link>

          </el-col>

        </el-row>

        <!--表格部分-->
        <el-row style="position: relative;top:60px">
          <el-table
            border
            style="width: 100%"
            :header-cell-style="{'text-align':'center',background:'#eef1f6',color:'#606266'}"
            :cell-style="{'text-align':'center'}"
            :data="tableData"
            highlight-current-row
           >
            <el-table-column
              v-if="false"
              property="id"
              label="促销单id"
              width="120">
            </el-table-column>
            <el-table-column
              property="date"
              label="促销编码"
              width="120">
            </el-table-column>
            <el-table-column
              property="name"
              label="促销门店"
              width="120">
            </el-table-column>
            <el-table-column
              property="address"
              label="促销日期">
            </el-table-column>
            <el-table-column
              property="address"
              label="制单人员">
            </el-table-column>
            <el-table-column
              property="address"
              label="审核日期">
            </el-table-column>
            <el-table-column
              property="address"
              label="审核状态">
            </el-table-column>
            <el-table-column
              property="address"
              label="促销状态">
            </el-table-column>
            <!--最后的 详情 修改 审核 删除  -->
            <el-table-column header-align="center" label="操作" >

              <!--列表内容-->
              <template slot-scope="scope" >
                <el-dropdown @command="handleCommand($event,scope.row)" placement="bottom">
              <span class="el-dropdown-link">
                <i  slot="reference" class="el-icon-more-outline"></i>
              </span>
                  <el-dropdown-menu slot="dropdown" style="text-align: center" >

                    <el-dropdown-item command="详情">详情</el-dropdown-item>

                    <el-dropdown-item command="修改">修改</el-dropdown-item>

                    <el-dropdown-item command="审核">审核</el-dropdown-item>

                    <el-dropdown-item command="删除">删除</el-dropdown-item>

                  </el-dropdown-menu>

                </el-dropdown>

              </template>

            </el-table-column>


<!--表格最后一行 -->

          </el-table>



        </el-row>

        <!--分页-->

            <el-row>

              <div class="block" style="text-align: center; position: relative;top: 66px;">

                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="PageSize"
                  layout=" jumper,prev,pager,next,sizes,total"
                  :total="totalCount">
                </el-pagination>
              </div>

            </el-row>


      </div>
    </template>

    <script>
      export default {
        name: "OrderPromotion",
        data() {
          return {
            input: '4',//input输入框的值
            date: "",//选中行的数据
            // 总数据
            tableData:[
              //表格数据，之后后端获得，删了
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              },
              {
                date: '2016-05-09',
                name: '王小虎6',
                address: '上海市普陀区金沙江路 1517 弄'
              },



            ],



            // 默认显示第几页
            currentPage:1,
            // 总条数，根据接口获取数据长度(注意：这里不能为空)
            totalCount:1,
            // 个数选择器（可修改）
            pageSizes:[2,3,5,10,20,50,100],
            // 默认每页显示的条数（可修改）
            PageSize:2,
            //模态框默认不可视
            dialogVisible: false,
          }
        },
        methods: {
          //1 审核状态的方法
          AuditMethod(command) {
                    this.$message({
                      message:'这是审核状态 ' + command,
                      type: 'warning'//success   error
                    });
          },
          //2 促销状态的方法
          PromotionMethod(command) {
                    this.$message({
                      message:'这是促销状态 ' + command,
                      type: 'warning'
                    });
          },
          //3 搜索的方法，根据促销编码模糊搜索
          searchMethod(){
                alert("你好啊，这是搜索方法")
          },
          //4 导出的方法
          OutMethod(){
            alert("你好啊，这是导出方法")
          },
          //5分页方法
      // 将页码，及每页显示的条数以参数传递提交给后台
      getData(n1,n2){
        /* alert(n1);alert(n2);*/
        let datas=new FormData();
        datas.append("limit",n1);
        datas.append("pageNum",n2);
        /*   datas.append("sort","create_time");
           datas.append("sortOrder","desc");*/

        // 这里使用axios，使用时请提前引入
       /* axios.post("address/page",
          datas
        ).then(res=>{

          // 将数据赋值给tableData
          /!*  this.tableData=data.data.body*!/
          this.tableData = res.data.rows;
          // 将数据的长度赋值给totalCount
          this.totalCount = res.data.total;

        })*/
      },
      // 分页
      // 每页显示的条数
      handleSizeChange(val) {
        // 改变每页显示的条数
        this.PageSize=val;
        // 点击每页显示的条数时，显示第一页
        this.getData(val,1);
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.currentPage=1
      },
      // 显示第几页
      handleCurrentChange(val) {
        // 改变默认的页数
        this.currentPage=val;
        /*   alert(val);*/
        /*  alert(this.PageSize);*/
        // 切换页码时，要获取每页显示的条数
        this.getData(this.PageSize,val)
      },
          //页面加载了显示表格分页数据
          created:function(){
            this.getData(this.PageSize,this.currentPage)
          },
          //6 详情 修改 审核  删除
          handleCommand(order,row){


            if(order==="删除"){
                alert("进入删除操作");

                后端发送axios请求删除此条ID的促销单

                //删除这一行表格数据 (重新获取表格数据展示)

            }else{

              alert("详情，修改，审核操作");
              //带着 order数据 和 这一行的表格数据，去新的页面 /promotion/AddPromotion
              /*location.href="";*/
              this.$router.push({name:"增加订单促销",params:{order:order,row:row}});

            }


          },


        }

      }
    </script>

    <style scoped>
      .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    </style>


